<template>
  <CustomEcharts :id="props.id" height="250px" width="100%" :full-options="echartsOptions" :loading="false">
  </CustomEcharts>
</template>

<script setup>
// 引进Echarts 组件
import { onMounted, reactive, defineProps, watch } from "vue";
import CustomEcharts from './customEcharts.vue';
import * as echarts from 'echarts';

const props = defineProps({
  echartsData: Object,
  id: String
});

const echartsOptions = reactive({
  options: {}
});

const createOption = () => {
  if (!props.echartsData || !props.echartsData.series) return {};

  // 修改为横向柱状图的数据结构
  const companies = ['智慧运营部', '第六分公司', '第五分公司', '第四分公司', '第三分公司', '第二分公司', '第一分公司'];
  const data1 = [280, 290, 300, 320, 280, 270, 260]; // 新签合同
  const data2 = [120, 130, 140, 160, 120, 150, 140]; // 营收

  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['新签合同', '营收'],
      right: '10%',
      top: 0
    },
    grid: {
      left: 0,
      right: '10%',
      bottom: '3%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#E5E7EB'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#E5E7EB'
        }
      }
    },
    yAxis: {
      type: 'category',
      data: companies,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#666'
      }
    },
    series: [
      {
        name: '新签合同',
        type: 'bar',
        barWidth: 8,
        itemStyle: {
          color: '#5B8FF9'
        },
        data: data1
      },
      {
        name: '营收',
        type: 'bar',
        barWidth: 8,
        itemStyle: {
          color: '#5AD8A6'
        },
        data: data2
      }
    ]
  };
};

// 监听数据变化
watch(() => props.echartsData, (newVal) => {
  if (newVal) {
    echartsOptions.options = createOption();
  }
}, { 
  deep: true, 
  immediate: true
});

onMounted(() => {
  echartsOptions.options = createOption();
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
  min-height: 260px;
}
</style>